<template>
	<view class="con">
		<view class="jpitem u-flex u-flex-y-center u-flex-between" v-for="(item,index) in userlist" :key="index"
			v-if="index<=1">
			<view class="u-flex u-flex-y-center">
				<image :src="item.avatar" mode="aspectFill" class="jptx"></image>
				<view class="jprl">
					<view class="jpname">
						{{item.username}}
					</view>
					<view class="jptime">
						{{item.createtime}}
					</view>
				</view>
			</view>
			<view class="jpprice">
				￥{{item.price}}
			</view>
		</view>
		
		<u-loadmore :status="status" @loadmore="onre"/>
	</view>
</template>

<script>
	import {getAuctionUserGoodsList} from '@/api/product.js'
	export default {
		data() {
			return {
				userlist:[],
				id:'',
				status: 'loadmore',
				page: 1,
				last_page:0
			};
		},
		methods:{
			getlist(){
				getAuctionUserGoodsList({id:this.id,page:this.page}).then(res=>{
					// console.log(res)
					this.status='loadmore'
					this.userlist=[...this.userlist,...res.data.data.data]
				})
			},
			onre(){
				this.page++
				if(this.page<=this.last_page){
					this.getlist()
				}else{
					this.status='nomore'
				}
			}
		},
		onLoad(option) {
			this.id=option.id
			this.getlist()
		},
		onReachBottom() {
			this.onre()
		},
	}
</script>

<style lang="less">
.jpitem {
		padding: 26rpx 0 18rpx;
		border-bottom: 2rpx solid #F9F8F8;

		.jptx {
			width: 105rpx;
			height: 106rpx;
			border-radius: 50%;
		}

		.jprl {
			padding: 18rpx;
			height: 70rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}

		.jpname {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 28rpx;
		}

		.jptime {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
			line-height: 24rpx;
		}

		.jpprice {
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: 800;
			color: #F6570A;
		}
	}
	.con{
		padding: 30rpx;
	}
</style>
